<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-swiper 
          :list="list"
          @click="onClick"
        />
      </view>
    </view>
    
    <!-- 指示器类型 -->
    <view class="demo-block">
      <view class="demo-block__title">指示器类型</view>
      <view class="demo-block__content">
        <fu-swiper 
          :list="list"
          indicator-type="line"
        />
      </view>
    </view>
    
    <view class="demo-block">
      <view class="demo-block__title">数字指示器</view>
      <view class="demo-block__content">
        <fu-swiper 
          :list="list"
          indicator-type="number"
          indicator-position="right"
        />
      </view>
    </view>
    
    <!-- 垂直滚动 -->
    <view class="demo-block">
      <view class="demo-block__title">垂直滚动</view>
      <view class="demo-block__content">
        <fu-swiper 
          :list="list"
          vertical
          :indicator="false"
        />
      </view>
    </view>
    
    <!-- 卡片式轮播 -->
    <view class="demo-block">
      <view class="demo-block__title">卡片式轮播</view>
      <view class="demo-block__content">
        <fu-swiper 
          :list="list"
          card
          :scale="0.85"
          :interval="4000"
          indicator-type="line"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          image: 'https://picsum.photos/800/400?random=1',
          title: '自然风光'
        },
        {
          image: 'https://picsum.photos/800/400?random=2',
          title: '城市建筑'
        },
        {
          image: 'https://picsum.photos/800/400?random=3',
          title: '人文风情'
        },
        {
          image: 'https://picsum.photos/800/400?random=4',
          title: '生活百态'
        }
      ]
    }
  },
  created() {
    // 预加载图片
    this.list.forEach(item => {
      const img = new Image()
      img.src = item.image
    })
  },
  methods: {
    onClick({ item, index }) {
      uni.showToast({
        title: `点击了${item.title}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    border-radius: var(--fu-radius-base);
    overflow: hidden;
  }
}
</style> 